<template>
    <div class="helpEdit">
        <h5>发布问题</h5>
        <ul class="inp-ul">
            <li>
                <span class="title">*一级类目</span>
                <el-select v-model="valueLevel1" placeholder="请选择">
                    <el-option v-for="item in options"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
                <span class="my-btn btn" style="color:#444;" @click="popTab">添加类目</span>
            </li>
            <li>
                <span class="title" >*问题描述</span>
                <input type="text" v-model="nameValue" placeholder="请输入名称">
            </li>
            <li>
                <span class="title">*答案</span>
                <textarea v-model="textareaValue"></textarea>
            </li>
        </ul>
        <div class="btn-box">
            <span class="my-btn btn btn2" style="margin:0;" @click="goback">取消</span>
            <span class="my-btn btn btn2 my-background" @click="releaseClick">发布</span>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                <p class="content-top">
                    <span>添加一级类目</span>
                    <span @click="masknum=false"><img src="../assets/img/error.png" alt=""></span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        <span>名称</span>
                        <span>
                            <input type="text" v-model="nameinpValue">
                        </span>
                    </li>
                </ul>
                <div class="btn-box">
                    <span @click="addcategory">提交</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            inpdata:'',
            masknum:false,
            options: [],
            valueLevel1: '',
            nameValue:'',
            textareaValue:'',
            nameinpValue:'',//遮罩层类目
        }
    },
    mounted(){
        this.release()
        this.getoptions1()
    },
    methods:{
        //判断发布或编辑
        release(){
            this.inpdata=this.$route.query.row
            console.log('this.inpdata',this.inpdata)
            if(this.inpdata){
                this.valueLevel1=this.inpdata.problemLableId
                this.nameValue=this.inpdata.name
                this.textareaValue=this.inpdata.content
            }
        },
        //取消
        goback(){
            this.$router.go(-1)
            // this.$router.push('/index')
        },
        //弹窗
        // popTab(valueLevel,n){
        popTab(){
            this.masknum=true
            // this.valueLevel=valueLevel
        },
        //获取一级类目
        getoptions1(){
            this.axios.get('/operate/sys/ProblemLable/getAll').then(res=>{
                this.options=res.data.list
                console.log('options',this.options)
            })
        },
        //添加类目
        addcategory(){
            var problemlableEntity={
                "id": 0,
                "image": "",
	            "name": ""
            }
            if(this.nameinpValue){
                problemlableEntity.name=this.nameinpValue
                    this.axios({
                    url:'/operate/sys/ProblemLable/Save',
                    method:'post',
                    data:JSON.stringify(problemlableEntity),
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                }).then(res=>{
                    this.getoptions1()
                    console.log(res.data)
                    this.masknum=false
                })
            }
        },
        //发布
        releaseClick(){
            var problemEntity={
                "content": "",
                "dissatisfied": 0,
                "hits": 0,
                "id": 0,
                "name": "",
                "problemLableId": 0,
                "satisfied": 0
            }
            problemEntity.content=this.textareaValue
            problemEntity.name=this.nameValue
            problemEntity.problemLableId=this.valueLevel1
            this.axios({
                url:'/operate/sys/Problem/SaveProblem',
                method:'post',
                data:JSON.stringify(problemEntity),
                headers: {'Content-Type': 'application/json;charset=UTF-8'}
            }).then(res=>{console.log(res.data)})
            this.$router.go(-1)
        },
    },
    watch:{
      
    }
}
</script>

<style scoped>
.inp-ul{
    width: 100%;
    margin-top: 30px;
}
.inp-ul>li{
    width: 100%;
    padding: 15px 0;
    display: flex;
    align-items: center;
}
.inp-ul>li>span:first-child{
    display: inline-block;
    text-align: right;
    width: 90px;
    margin-right: 15px;
}
.inp-ul>li:nth-child(3){
    align-items: flex-start;
}
.btn-box{
    padding: 10px 50px;
    padding-left: 110px;
    margin-top: 60px;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.btn2{
    width: 100px;
    text-align: center;
}
textarea{
    width: 600px;
    height: 200px;
    padding: 5px 10px;
}
input{
    width: 210px;
    padding-left: 15px;
}
input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}




/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
}
.mask .content{
    width: 420px;
    height: 260px;
    overflow: auto;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
    box-sizing: border-box;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
}
.mask .content-top img{
    width: 35px;
}
.content-items{
    margin: 10px 25px 30px;
}
.content-items .item{
    margin:30px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 60px;
    text-align: center;
    margin-right: 20px;
}
.mask .btn-box{
    text-align: center;
    margin: 0px;
    /* margin-bottom: 0; */
}
.mask .btn-box span{
    display: inline-block;
    padding: 5px 30px;
    border-radius: 5px;
    background: #FDD94C;
    color: #fff;
}
</style>